<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商城</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="http://g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
    <style>
        .headerAndName {
            display: -webkit-flex;
            display: flex;
            justify-content: flex-start;
            background: rgba(255, 255, 255, 1);
        }

        .header img {
            margin: 0.5rem;
            height: 4rem;
            width: 4rem;
        }

        .icon-img img {
            margin-top: 0.5rem;
            width: 1.5rem;
            height: 1.5rem;
        }

        .headerAndName .name {
            display: -webkit-flex;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }

        #user-name {
            margin-top: 0.5rem;
            font-size: 0.7rem;
            font-family: MicrosoftYaHei;
            color: rgba(51, 51, 51, 1);
        }

        #recommend {
            margin-bottom: 0.5rem;
            font-size: 0.7rem;
            font-family: MicrosoftYaHei;
            color: rgba(153, 153, 153, 1);
        }


        .amount {
            background: rgba(255, 255, 255, 1);
            border-top: 0.1rem solid rgba(238, 238, 238, 1);
        }

        .balance {
            text-align: center;
            border-right: 0.1rem solid rgba(238, 238, 238, 1);
        }

        .sales {
            text-align: center;
        }

        .align-right {
            float: right;
        }

        .item-name {
            height: 2.5rem;
            width: 5rem;
            vertical-align: center;
            line-height: 2.5rem;
            margin-bottom: 0.5rem;
        }

        .saleText {
            font-size: 0.7rem;
            font-family: MicrosoftYaHei;
            color: rgba(153, 153, 153, 1);
        }

        .balance-show {
            font-size: 1rem;
            font-family: MicrosoftYaHei;
            color: rgba(255, 147, 38, 1);
        }

        .saleAmount {
            font-size: 0.9rem;
            font-family: MicrosoftYaHei;
            color: rgba(51, 51, 51, 1);
        }
        .myCommission {
            margin-top: 1.5rem;
            background: rgba(255, 255, 255, 1);
        }

        .myCommissionItem {
            display: -webkit-flex;
            display: flex;
            margin-top: 0.2rem;
            height: 2.5rem;
            vertical-align: center;
            line-height: 2.5;
        }

        .rowGruop {
            background: rgba(255, 255, 255, 1);
            height: 2.5rem;
            vertical-align: center;
            line-height: 2.5;
            border-bottom: 0.1rem solid rgba(238, 238, 238, 1);
        }
		.text-icon{
			display: -webkit-flex;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			width: 90%;
			
		}

        .rowGruopItem {
            display: -webkit-flex;
            display: flex;
        }
    </style>
</head>

<body>
    <!-- 你的html代码 -->
    <div class="page">
        <!--<header class="bar bar-nav">-->
            <!--<a class="button button-link button-nav pull-left" data-transition='slide-out'>-->
                <!--<span class="icon icon-left"></span>-->
                <!--返回-->
            <!--</a>-->
            <!--<h1 class="title">个人</h1>-->
        <!--</header>-->
        <nav class="bar bar-tab">
            <a class="tab-item" href="./index.html">
                <span class="icon icon-home"></span>
                <span class="tab-label">首页</span>
            </a>
            <a class="tab-item" href="./category.html">
                <span class="icon icon-menu"></span>
                <span class="tab-label">分类</span>
            </a>
            <a class="tab-item" href="./cart.html">
                <span class="icon icon-cart"></span>
                <span class="tab-label">购物车</span>
            </a>
            <a class="tab-item  active" href="./personal.html">
                <span class="icon icon-me"></span>
                <span class="tab-label">我的</span>
            </a>
        </nav>
        <!-- 这里是页面内容区 -->
        <div class="content">
            <div class="headerAndName">
                <div class="header">
                    <img src="http://img.zcool.cn/community/0142135541fe180000019ae9b8cf86.jpg@1280w_1l_2o_100sh.png" />
                </div>
                <div class="name">
                    <span id="user-name">袁飞龙</span>
                    <span id="recommend">推荐人:袁飞龙</span>
                </div>
            </div>
            <div class="personal">
                <div class="row amount">
                    <div class="col-50 balance">
                        <span class="balance-show">2556.00</span>
                        <br>
                        <span class="saleText">余额(元)</span>
                    </div>
                    <div class="col-50 sales">
                        <span class="saleAmount">2556.00</span>
                        <br>
                        <span class="saleText">销售额(元)</span>
                    </div>
                </div>
            </div>
            <div class="row myCommission">
                <div class="col-100 myCommissionItem" onclick="jumpComm()">
                    <span class="icon-img">
                        <img src="image/icon_my_commission.png">
                    </span>&nbsp;&nbsp;
                    <div class="text-icon">
                    	<span class="item-name">我的佣金</span>
                    	<span class="icon icon-right align-right"></span>
                    </div>
                </div>
            </div>

            <div class="row order rowGruop myCommission">
                <div class="col-100 rowGruopItem" onclick="jumpOrderList()">
                    <span class="icon-img">
                        <img src="image/icon_my_order.png">
                    </span>&nbsp;&nbsp;
                    <div class="text-icon">
                    	<span class="item-name">我的订单</span>
                    	<span class="icon icon-right align-right"></span>
                    </div>
                </div>
            </div>

            <div class="row address rowGruop">
                <div class="col-100 rowGruopItem" onclick="jumpAddress()">
                    <span class="icon-img">
                        <img src="image/icon_shipping_address.png">
                    </span>&nbsp;&nbsp;
                    <div class="text-icon">
                    	<span class="item-name">收货地址</span>
                    	<span class="icon icon-right align-right"></span>
                    </div>
                </div>
            </div>

            <div class="address rowGruop">
                <div class="rowGruopItem" onclick="jumpTeam()">
                    <span class="icon-img">
                        <img src="image/icon_team_members.png">
                    </span>&nbsp;&nbsp;
					<div class="text-icon">
						<span class="item-name">团队成员</span>
						<span class="team">
							<span class="num">15</span>
							<span class="icon icon-right" ></span>
						</span>
					</div>
                </div>
            </div>

            <div class="address withdraw myCommission" onclick="applyWithdraw();">
                <div class="withdrawItem myCommissionItem">
                    <span class="icon-img">
                        <img src="image/icon_request_withdrawal.png">
                    </span>&nbsp;&nbsp;
					<div class="text-icon">
						<span class="item-name">申请提现</span>
						<span class="icon icon-right align-right"></span>
					</div>
                </div>
            </div>

        </div>
    </div>

        <script type='text/javascript' src='http://g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='http://g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
        <script src="js/index.js"></script>
</body>
<script>
    $(function () {
        getUserInfo("1");
    });
    //我的订单
    function jumpOrderList() {
        window.location.href = "./order/myOrder.html";
    }
    //我的佣金
    function jumpComm() {
        window.location.href = "./my/myCommission.html"
    }
    //我的地址
    function jumpAddress() {
        window.location.href = "./my/myAddress.html?source=my"
    }
    //我的团队成员
    function jumpTeam() {
        window.location.href = "./my/myTeam.html"
    }
    /**
     * 申请提现
     */
    function applyWithdraw() {
        window.location.href = "./my/applyWithdraw.html?q=" + $(".balance .balance-show").text();;
    }

    function getUserInfo(userId) {
        $.getJSON(prefix + "/userInfo/api/userCenter", function (data) {
            var wallet = data.walletInfo;
            var user = data.userInfo;
            if (data.code == 0) {
                $(".team .num").text(data.teamNum);
                $(".balance-show").text(wallet.flAvailableAmount);
                $(".saleAmount").text(wallet.flIncomeAmount);
                $(".name #user-name").text(user.flName);
                $("#recommend").text("推荐人: " + data.recommend);
                $(".header img").attr("src", user.flAvatar)
            }
        });
    }
</script>

</html>
